<template>
  <div>
    <div class="sealtableheader">
      <div class="left-container1">
        <div>
          <svg class="icon">
            <use xlink:href="#icon-kehu"></use>
          </svg>
        </div>
        <div class="icon-title">
          <span>客户管理</span>
        </div>
      </div>
      <div class="midlecontainer1">
      </div>
      <div class="right-container1">
        <el-button class="right-button1" type="primary">查重</el-button>
        <el-button class="right-button1">导出</el-button>
        <!-- <button class="right-button2">客户查重</button> -->
      </div>
    </div>
    <el-card>
      <div class="Table-container">
        <avue-crud :data="data" :option="option"  :page.sync="page" @size-change="sizeChange" @current-change="currentChange">
          <template slot="detail" slot-scope="{ row }">
            <span
              type="text"
              @click.stop="rightslidercontent(row)"
              style="color: #409eff"
              @closeDrawer="cleara">{{ row.name }}</span>
          </template>
          <!-- <template slot="menuRight" slot-scope="{size}">
     <el-button type="primary" icon="el-icon-search" circle :size="size" ></el-button>
      </template> -->
        </avue-crud>
        <shopping ref="child111" />
      </div>
    </el-card>
  </div>
</template>

<script>
import shopping from "./shopping.vue";
export default {
  components: { shopping },
  data() {
    return {
      page:{
         currentPage: 1,
          total: 10,
          layout: "total,pager,prev, next",
          background:false,
          pageSize: 10
      },
      table2: false,
      showTable: false,
      data: [
        {
          name: "张三",
          sex: "男",
          detail: "detail",
        },
        {
          name: "张三",
          sex: "男",
          detail: "detail",
        },
        {
          name: "张三",
          sex: "男",
          detail: "detail",
        },
        {
          name: "张三",
          sex: "男",
          detail: "detail",
        },
        {
          name: "张三",
          sex: "男",
          detail: "detail",
        },
        {
          name: "张三",
          sex: "男",
          detail: "detail",
        },
        {
          name: "张三",
          sex: "男",
          detail: "detail",
        },
        {
          name: "张三",
          sex: "男",
          detail: "detail",
        },
        {
          name: "张三",
          sex: "男",
          detail: "detail",
        },
        {
          name: "李四",
          sex: "女",
          detail: "点我",
        },
        {
          name: "李5",
          sex: "女",
          detail: "点我",
        },
        {
          name: "李6",
          sex: "女",
          detail: "点我",
        },
        {
          name: "李7",
          sex: "女",
          detail: "点我",
        },
        {
          name: "李8",
          sex: "女",
          detail: "点我",
        },
      ],
      option: {
        height: "auto",
        calcHeight: 200,
        searchMenuSpan: 6,
        border: true,
        index: true,
        indexFixed: false,
        indexLabel: "序号",
        editBtn: false,
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        menuWidth: 180,
        menuXsWidth: 75,
        align: "center",
        column: [
          {
            label: "姓名",
            prop: "name",
          },
          {
            label: "性别",
            prop: "sex",
          },
          {
            label: "客户详情",
            prop: "detail",
          },
        ],
      },
    };
  },
  created(){
    this.getList()
  },
  methods: {
    getList(){
        this.page1.total = 40
        this.data=[{
          name: "张三",
          sex: "男",
          detail: "detail",
        },
        {
          name: "张三",
          sex: "男",
          detail: "detail",
        }]
    },
    cleara() {
      //抽屉drawer弹窗关闭开关
      this.table = false;
    },
    rightslidercontent(row) {
      // this.table2=true
      // this.showTable = true;
      // 抽屉组件显示开关
      console.log(row);
      this.$refs.child111.show(row);
    },
     sizeChange(val) {
        this.page1.currentPage = 1
        this.page1.pageSize = val
        this.getList()
        this.$message.success('行数' + val)
      },
      currentChange(val) {
        this.page1.currentPage = val
        this.getList()
        this.$message.success('页码' + val)
      }
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
* {
  box-sizing: border-box;
}
.sealtableheader {
  /* background-color: #ffffff; */
  height: 5vh;
  width: 100%;
  /* background-color: #f5f6f9; */
  display: flex !important;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
}
.icon {
  height: 40px;
  width: 40px;
}
.c-container {
  width: 100%;
  background-color: #2980b9;
  height: auto;
  margin-left: 0px;
}
.right-container1 {
  display: flex;
  justify-content: center;
  /* background-color: #8e44ad; */
  align-items: center;
  margin-right: 0px;
}
.Table-container {
  height: 60vh;
  width: 100%;
  /* overflow: scroll; */
  /* overflow-y: scroll;
  overflow-x: scroll; */
}
.left-container1 {
  display: flex;
  color: #333;
  justify-content: space-between;
  /* background: linear-gradient(to bottom, #00f5a0, #00d9f5); */
  font-weight: 600 !important;
  font-size: 13px;
  align-items: center;
}
.right-button1 {
  height: 30px;
  width: 100px;
  margin-right: 20px;
  /* background-color: #12b886; */
  border: inherit;
}
.right-button2 {
  width: 100px;
  height: 30px;
  /* background-color: #fd7e14; */
  background-color: #f5f6f9;
  border: inherit;

}
</style>
